<!--  等级工资-->
<template>
  <div>
    <Row class="search-info-style">
      <Col span="6">
        <span style="">职位：</span>
        <Select v-model="searchInfo.post" filterable transfer="" style="width: 70%;">
          <Option :value="item.TYPECODE" v-for="item in positionList" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
        </Select>
      </Col>
      <Col style="float:right" pull="1">
        <Button class="new-btn-sty" @click="init()"><Icon type="ios-search" />搜索</Button>
        <Button class="new-btn-sty" @click="add()"><Icon type="md-add" />添加</Button>
        <Button class="new-btn-sty" @click="importTemplate()"><Icon type="md-add" />导入模板</Button>
      </Col>
    </Row>
    <Table border :columns="columns" :data="data">
      <template slot-scope="{ row }" slot="end_years">
        <span v-if="row.end_years === 100"></span>
        <span v-if="row.end_years !== 100">{{row.end_years}}</span>
      </template>
      <template slot-scope="{ row }" slot="post">
        <span  :value="item.TYPECODE" v-for="item in positionList" v-bind:key="item.TYPECODE"  v-if="row.post == item.TYPECODE">{{ item.TYPENAME }}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="show(row)">编辑</Button>
      </template>
    </Table>
    <Row v-if="loadData == true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Page class="page_style" :total="totalnum" :current="currentPageNo"
          :page-size="currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
    <Modal v-model="modalEdit" title="设置等级工资" @on-ok="OK111">
      <Form :model="paramData" >
        <Row class="item1">
          <Col span="7" style="text-align: right" class="">等级:<span style="color: red">(必填)</span></Col>
          <Col span="12" offset="1">
            <InputNumber style="width: 245px" :min="1" :max='12' v-model="paramData.grade" placeholder="请输入等级"/>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="7" style="text-align: right" class="">职位:<span style="color: red">(必填)</span></Col>
          <Col span="12" offset="1">
            <Select v-model="paramData.post" filterable transfer="">
              <Option :value="item.TYPECODE" v-for="item in positionList" v-bind:key="item.TYPECODE">{{item.TYPENAME}}</Option>
            </Select>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="7" style="text-align: right" class="">工作年限(起):<span style="color: red">(必填)</span></Col>
          <Col span="12" offset="1">
            <InputNumber @on-change="changEndYears(paramData.start_years)" style="width: 245px" :max="33" :min="0" v-model="paramData.start_years" placeholder="请输入工作年限(起)"/>
          </Col>
        </Row>
        <Row class="item1">
          <Col span="7" style="text-align: right" class="">工作年限(止):<span style="color: red">(必填)</span></Col>
          <Col span="12" offset="1">
            <InputNumber v-if="yearsType" style="width: 245px" :min="0" v-model="paramData.end_years" placeholder="请输入工作年限(止)"/>
            <InputNumber disabled v-if="!yearsType" style="width: 245px"  :min="0" placeholder="请输入工作年限(止)"/>
          </Col>
        </Row>
<!--        <Row class="item1">-->
<!--          <Col span="7" style="text-align: right" class="">工资系数:<span style="color: red">(必填)</span></Col>-->
<!--          <Col span="12" offset="1">-->
<!--            <Input type="number" @on-change="calculation(paramData.coefficient)" v-model="paramData.coefficient" placeholder="请输入工资系数"/>-->
<!--          </Col>-->
<!--        </Row>-->
        <Row class="item1">
          <Col span="7" style="text-align: right" class="">等级工资(元):<span style="color: red">(必填)</span></Col>
          <Col span="12" offset="1">
            <InputNumber style="width: 245px" :min='0'  v-model="paramData.money_num" />
          </Col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>
<script>
import { getTypeNameList, saveGradeWages, findGradeWagesList, addGradeInfo } from '@/api/eventlist'
export default {
  data () {
    return {
      currentPageNo: 1,
      currentPageSize: 8,
      totalnum: 0,
      loadData: true,
      modalEdit: false,
      yearsType: false,
      searchInfo: {},
      paramData: {
        start_years:0,
        end_years:0,
        grade:1
      },
      positionList: [],
      data: [],
      columns: [
        { title: '序号', type: 'index', width: 80, align: 'center' },
        { title: '区县', key: 'company_name', align: 'center' },
        { title: '职位', slot: 'post', align: 'center' },
        { title: '等级', key: 'grade', align: 'center' },
        { title: '工作年限起(年)', key: 'start_years', align: 'center' },
        { title: '工作年限止(年)', slot: 'end_years', align: 'center' },
        //{ title: '系数', key: 'coefficient', align: 'center' },
        { title: '等级工资（元）', key: 'money_num', align: 'center' },
        { title: '操作', slot: 'action', align: 'center' }
      ]
    }
  },
  methods: {
    init() {
      console.log('初始化方法')
      let param = {
        pageSize: this.currentPageSize,
        pageNo: this.currentPageNo,
        post: this.searchInfo.post
      }
      findGradeWagesList(param).then(res => {
        if (res.data.errcode === 0) {
          this.data = res.data.data.results
          this.totalnum = res.data.data.totalRecord
          this.loadData = false
        } else {
          this.$Notice.error({
            title: '获取绩效工资失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    add () {
      console.log('添加的方法')
      this.paramData = {
        start_years:0,
        end_years:0,
        grade:1
      }
      this.yearsType = true
      this.modalEdit = true
    },
    show (item) {
      console.log(item)
      this.paramData = this.$common.xeUtils.clone(item,true)
      this.changEndYears(this.paramData.start_years)
      this.modalEdit = true
    },
    OK111 () {
      saveGradeWages(this.paramData).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '操作成功', desc: '' })
          this.paramData = {}
          this.init()
        } else {
          this.$Notice.error({
            title: '操作失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    changEndYears (starts_years) {
      console.log(starts_years, 'starts_years')
      if (starts_years === 33) {
        this.yearsType = false
        this.paramData.end_years = 100
      } else {
        this.yearsType = true
      }
    },
    calculation (index) {
      this.paramData.money_num = 1500 * index
    },
    importTemplate () {
      addGradeInfo().then(res => {
        if (res.data.errcode === 0) {
          this.init()
          this.$Notice.success({
            title: '操作完成',
            desc: ''
          })
        } else {
          this.$Notice.error({
            title: '操作失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getTypeName (id) {
      getTypeNameList({ typegroupcode: id }).then(res => {
        if (res.data.errcode === 0) {
          this.positionList = res.data.data
        } else {
          this.$Notice.error({
            title: '获取字典列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    size (pageSize) {
      this.currentPageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.currentPageNo = pageNo
      this.init()
    }
  },
  mounted() {
    this.init()
    this.getTypeName('position')
  }
}
</script>
<style scoped>
.search-info-style {
  margin: 10px;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
}
.item1{
  height: 42px;
  line-height: 40px;
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
</style>
